<template>
    <div class="login-panel">
      <el-tabs type="border-card" class="demo-tabs" stretch v-model="currentTab">
        <el-tab-pane name="account">
          <template #label>
            <span class="custom-tabs-label">
              <el-icon><user /></el-icon>
              <span>账号登录1</span>
            </span>
          </template>
          <login-account ref="accountRef"/>
        </el-tab-pane>
        <el-tab-pane name="phone">
          <template #label>
            <span class="custom-tabs-label">
              <el-icon><iphone /></el-icon>
              <span>手机登录</span>
            </span>
          </template>
          <login-phone ref="phoneRef"/>
        </el-tab-pane>
      </el-tabs>
      <el-button type="primary" class="login-btn" @click="handleLoginClick">登录</el-button>
    </div>
    
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import { User, Iphone } from '@element-plus/icons-vue'
import LoginAccount from './login-account.vue'
import LoginPhone from './login-phone.vue'

export default defineComponent({
    components:{
        LoginAccount, LoginPhone
    },
    setup () {

      const accountRef = ref<InstanceType<typeof LoginAccount>>()
      const phoneRef = ref<InstanceType<typeof LoginAccount>>()
      const currentTab = ref<string>("account")
      const handleLoginClick = ()=>{
        if(currentTab.value === "account"){
          accountRef.value?.loginAction()
        }else{
          console.log('phone',phoneRef)
        }
        
      }
        return {
          handleLoginClick,
          accountRef,
          currentTab,
          phoneRef
        }
    },
})
</script>

<style scoped>
.login-panel{
    width:400px;
    /* height:400px */
}
.login-btn{
  width:100%;
  margin-top: 10px;
}
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
.demo-tabs .custom-tabs-label .el-icon {
  vertical-align: middle;
}
.demo-tabs .custom-tabs-label span {
  vertical-align: middle;
  margin-left: 4px;
}


</style>